<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>考勤</title>
    
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/style.css" rel="stylesheet"/>
    <link href="../../css/iconfont.css" rel="stylesheet"/>
    <link href="../../css/mui.picker.css" rel="stylesheet" />
	<link href="../../css/mui.poppicker.css" rel="stylesheet" />
    <script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.picker.js"></script>
	<script src="../../js/mui.poppicker.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span></button>
	<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">完成</button>
	<h1 class="mui-title">审批</h1>
</header>
<style type="text/css">
	.mui-btn-block{
		margin-bottom: 0px;
	}
	.fixed-word{
		float: left;
		margin-left: 20px;
		color: #737373;
	}
	.ajax-word{
		margin-right: 5px;
		float: right;
	}
</style>
<div class="mui-content">
	<ul class="mui-table-view mui-table-view-chevron" >
		<li class="mui-table-view-cell mui-media">
			<img class="mui-media-object mui-pull-left head-img" id="head-img" src="../../images/user-photo.png">
			<div class="mui-media-body">
				<span id="name"></span>
				<p class='mui-ellipsis'>账号:<span id="phone"></span></p>
			</div>
		</li>
	
	<li class="mui-table-view-cell mui-media">
		<span class="fixed-word">请假类型</span><span id="type" class="ajax-word"></span>
	</li>
	<li class="mui-table-view-cell mui-media">
		<span class="fixed-word">申请日期</span><span id="applyday" class="ajax-word"></span>
	</li>
	<li class="mui-table-view-cell mui-media">
		<span class="fixed-word">开始日期</span><span id="startday" class="ajax-word"></span>
	</li>
	<li class="mui-table-view-cell mui-media">
		<span class="fixed-word">结束日期</span><span id="endday" class="ajax-word"></span>
	</li>
	<li class="mui-table-view-cell mui-media">
		<span class="fixed-word">请假原因</span><br><span id="reason" class="ajax-word" style="margin-left: 20px;"></span>
	</li>
	</ul>
	
	<div id="checkList">

	</div>
	<ul class="mui-table-view mui-table-view-chevron">
		<li class="mui-table-view-cell">
			<span>是否同意请假</span>
			<div id="checkresult" class="mui-switch mui-switch-blue">
				<div class="mui-switch-handle"></div>
			</div>
		</li>

		<div class="mui-input-row" style="margin: 10px 5px;">
			<textarea id="checkreason" rows="2" placeholder="请输入审批原因"></textarea>
		</div>
	</ul>
</div>
	

<script type="text/javascript">
var checkresult = "1";
var attendanceid = "";
document.getElementById("checkresult").addEventListener('toggle', function(event) {
	//event.detail.isActive 可直接获取当前状态
	checkresult = (event.detail.isActive ? '0' : '1');
});
mui.plusReady(function() {
	var self = plus.webview.currentWebview();
	attendanceid = self.attendanceid;
	var storage = window.localStorage;
	var root = storage.getItem('root');
	mui.ajax(root+"/att/getAtt/"+attendanceid, {
		async: false,
		dataType:'json',//服务器返回json格式数据
		type:'get',//HTTP请求类型
		timeout:0,//超时时间设置为10秒；
		success:function(data){
			if(data){
				var att = data.att;
				var checkList = data.checkList;
				document.getElementById("name").innerHTML = att.tempUsername;
				document.getElementById("phone").innerHTML = att.phone;
				document.getElementById("type").innerHTML = att.holidayName;
				document.getElementById("applyday").innerHTML = att.attendance.applyday.substr(0, 10);
				document.getElementById("startday").innerHTML = att.attendance.startday.substr(0, 10);
				document.getElementById("endday").innerHTML = att.attendance.endday.substr(0, 10);
				document.getElementById("reason").innerHTML = att.attendance.reason;
				var html = '<ul class="mui-table-view">';
				var list = ["", "", ""];
				for(var i = 0; i < checkList.length; i++){
					var title = "", index = 0;
					if(checkList[i].check.property == "1"){
						title = "一级审批意见";
						index = 0;
					}else if(checkList[i].check.property == "2"){
						title = "二级审批意见";
						index = 1;
					}else if(checkList[i].check.property == "3"){
						title = "三级审批意见";
						index = 2;
					}
					list[index] += '<li class="mui-table-view-cell mui-collapse">'+
						'<a class="mui-navigate-right" href="#">'+title+'</a>'+
						'<ul class="mui-table-view mui-table-view-chevron">'+
							'<li class="mui-table-view-cell mui-media">'+
								'<span class="fixed-word">审批人</span><span id="check_user" class="ajax-word">'+checkList[i].username+'</span></li>'+
							'<li class="mui-table-view-cell mui-media">'+
								'<span class="fixed-word">审批结果</span><span id="check_result" class="ajax-word">'+(checkList[i].check.checkresult=='0'?"通过":"不通过")+'</span></li>'+
							'<li class="mui-table-view-cell mui-media">'+
								'<span class="fixed-word">审批原因</span><br><span id="check_reason" class="ajax-word" style="margin-left: 20px;">'+checkList[i].check.reason+'</span>'+
							'</li></ul></li>';
				}
				html += list[0]+list[1]+list[2];
				html += '</ul>';
				document.getElementById("checkList").innerHTML = html;
			}else{
				mui.toast('获取失败');
			}
		},
		error:function(xhr,type,errorThrown){
			//异常处理；
			mui.toast('网络异常');
		}
	});
});

document.getElementById("submit").addEventListener("tap", function(){
	var reason = document.getElementById("checkreason").value;
	if(reason == ""){
		mui.toast("请输入审核原因");
		return;
	}
	var storage = window.localStorage;
	var root = storage.getItem('root');
	var data = {
			"attendanceid":attendanceid,
			"checkresult":checkresult,
			"reason":document.getElementById("checkreason").value
	};
	data = JSON.stringify(data);
	mui.ajax(root+"/check/addCheck", {
		data:data,
		contentType:"application/json;charset=UTF-8",
		dataType:'json',//服务器返回json格式数据
		type:'post',//HTTP请求类型
		timeout:0,//超时时间设置为5秒；
		success:function(data){
			//服务器返回响应，根据响应结果，分析是否登录成功；
			if(data.status == 'OK'){
				mui.back();
				mui.toast('审核成功');
			}else{
				mui.toast('审核失败，请重试');
			}
		},
		error:function(xhr,type,errorThrown){
		//异常处理；
		mui.toast('网络异常');
		}
	});
});
	
</script>
</body>
</html>